 <!-- 
 @Author: LW 
 @Date: 2021-01-11 15:03:25   
 @function:用户管理
----------------------------------------------------------  
 @Last Modified by: LW-2021-04-08 13:58:16  
 @Modified function:优化界面，修改点击查询不重置分页查询信息BUG
 -->
<template>
  <div>
      <el-row :gutter="6">
        <el-col :span="4">
          <el-card class="box-card p-0">
            <div class="tree-header">
              <span class="treetit">
                <i class="iconfont iconshigongdanwei"></i>组织机构树状列表信息
              </span>
            </div>
            <div class="tree-filter">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
                <el-button size="mini" type="primary" slot="append" @click="emptyFilter()">清空</el-button>
              </el-input>
            </div>
            <div ref="treeHeight" class="tree-content">
              <el-tree
                class="tree"
                node-key="id"
                :indent="indentValue"
                accordion
                ref="treeBox"
                :data="departmentTree"
                :props="defaultProps"
                :default-expand-all="true"
                :highlight-current="true"
                icon-class="el-icon-arrow-right"
                :filter-node-method="filterNode"
                @node-click="dwTreeclick"
              ></el-tree>
            </div>
          </el-card>
        </el-col>
        <!-- 、、、、、、、、、、、右侧用户信息结构、、、、、、、、、、、、、、、、 -->
        <el-col :span="20">
          <el-card class="box-card">
            <el-card class="box-card card1" shadow="hover">
              <div class="searchBox">
                <!-- 搜索筛选 -->
                <el-form :inline="true" :model="formSearch" class="user-search">
                  <el-form-item label="搜索：">
                    <el-input
                      size="mini"
                      v-model="formSearch.parameters.sKeyWords"
                      placeholder="模糊查询"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="岗位：">
                    <el-select v-model="formSearch.parameters.postIdLists" multiple collapse-tags size="mini">
                      <el-option
                        v-for="item in listFormInfo.listPostData"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-search"
                      @click="handleSearch()"
                    >搜索</el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-plus"
                      @click="handleAdd()"
                    >新增</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      icon="el-icon-remove"
                      @click="handleRemove()"
                      v-if="canBeRemove==true"
                    >删除</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
            <el-row :gutter="10">
              <el-col :span="24">
                <el-card class="box-card" shadow="hover">
                  <!--列表 -->
                  <el-table
                    class="ptab"
                    border
                    stripe
                    size="small" 
                    ref="multipleTable"
                    :data="listData"
                    highlight-current-row
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    style="width: 99%"
                    :height="tableHeight"
                    @selection-change="checkSelect"
                    @row-click="handleRowClick"
                  >
                   <el-table-column align="center" type="selection" class="checkbox-inp" width="55"></el-table-column>
                   <el-table-column align="center"  label="序号" width="55px">
                      <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="登录名" width="140"></el-table-column>
                    <el-table-column align="center" prop="realname" label="真实名称" width="160"></el-table-column>
                    <el-table-column align="center" prop="mobile_phone" label="手机号码" width="140"></el-table-column>
                    <el-table-column align="center" prop="gender" label="性别" width="70"></el-table-column>
                    <el-table-column align="center" prop="email" label="邮箱" width="170" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="role_names" label="角色" width="200" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="department_names" label="部门" width="200" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="post_names" label="岗位"  width="200" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column align="center" prop="is_valid" label="是否启用" width="140">
                      <template slot-scope="scope">
                        <el-switch
                          on-text="启用"
                          off-text="禁止"
                          on-color="#5B7BFA"
                          off-color="#dadde5"
                          v-model="scope.row.is_valid"
                        ></el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="220" fixed="right">
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          icon="el-icon-refresh"
                          size="mini"
                          class="btnBlue1"
                          @click="handleReset(scope.$index, scope.row)"
                        >密码重置</el-button>
                        <el-button
                          type="text"
                          icon="el-icon-edit"
                          size="mini"
                          class="btnBlue"
                          @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button>

                        <el-button
                          type="text"
                          icon="el-icon-remove"
                          size="mini"
                          class="btnRed"
                          @click="handleRemove(scope.$index, scope.row)"
                          v-if="scope.row.is_super_user==false"
                        >删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
                  <Pagination v-bind:child-msg="pageparm" @callFather="pageListInfo"></Pagination>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!-- 编辑等操作弹窗 -->
      <!-- dialog 弹窗顶部下划线 v-dialogDrag可拖拽-->
      <el-dialog
        :title="editForm.formTitle"
        :visible.sync="editForm.formVisible"
        v-if="editForm.formVisible"
        :width="editForm.width"
        v-dialogDrag
        custom-class="dialog"
        :close-on-click-modal="false"
      >
        <component v-bind:is="curComponent" v-bind:listData="listFormInfo" v-bind:formInfo="formInfo" @callBack="callBack"></component>
      </el-dialog>
  </div>
</template>
<script>

import EditForm from "./components/edit"; //编辑
import Pagination from "@/components/common/pagination"; //分页组建
import UserHttp from "@/api/authority/user"; //http
//定义变量
const {
  loadDepartmentTreeList,//获取组织树列表
  loadPostTreeListInfo,//获取岗位树状列表
  loadDepartmentList,//获取部门下拉列表信息
  loadRoleTreeListInfo,//获取角色树状列表
  loadPageList,
  pswReset,//重置密码
  removeInfo,//删除
} = UserHttp;
export default {
  //注册组件
  components: { 
    Pagination,
    EditForm
  },
  data() {
    return {
      /*树形控件*/
      indentValue: 5,//相邻级节点间的水平缩进，单位为像素
      filterText: "",//树形控件查询
      departmentTree: [],//树形控件信息
      defaultProps: {
        children: "children",
        label: "title"
      },
      //列表相关
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.75, //表格高度
      pageparm: { currentPage: 1, pageSize: 16, total: 0 }, //分页参数
      listData: [], //表格返回信息
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 16,
        field: "sort",
        order: "asc",
        parameters: {
          sKeyWords: "", //关键字
          postIdLists:[],
          postIds: "",
          departmentId: ""
        }
      },
      listFormInfo:{
        listDepartmentData:[],//所属部门
        listPostData: [], //岗位列表信息
        listRoleData:[],//所属角色
      },
      canBeRemove:true,//是否可以删除
      
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: "", 
      },
      curComponent: null,
      formInfo: {},
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**
   * 数据发生改变
   */
  watch: {
    //检索监听
    filterText(val) {
      this.$refs.treeBox.filter(val);
    }
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //高度自适应
    this.highlyAdaptive();
    //获取组织树列表
    this.loadDepartTreeList();
    //岗位列表
    this.loadPostTreeList();
    //角色列表
    this.loadRoleTreeListInfo();
    //获取数据方法
    this.loadList();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    ///////////////////////////////////树形控件操作////////////////////////////////////////////////
    //高度自适应
    highlyAdaptive() {
      var h = (document.documentElement.clientHeight || document.body.clientHeight) *0.798;
      this.$refs.treeHeight.style.height = h + "px"; //动态设置HTML元素高度
    },
    //获取组织树
    loadDepartTreeList() {
      let self = this;
      let par = {};
      loadDepartmentTreeList(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.departmentTree = data.Data;
          self.listFormInfo.listDepartmentData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg);  
        }
      });
    },
    //岗位列表
    loadPostTreeList() {
      let self = this;
      let par = {};
      loadPostTreeListInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.listFormInfo.listPostData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg); 
        }
      });
    },
    //角色列表
    loadRoleTreeListInfo() {
      let self = this;
      let par = {};
      loadRoleTreeListInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.listFormInfo.listRoleData = data.Data;
        } else {
          self.$messageTip.warning(data.Msg); 
        }
      });
    },
    //树过滤触发
    filterNode(value, data) {
      if (!value) {
        return true;
      }
      return data.title.indexOf(value) !== -1;
    },
    //清空Filter
    emptyFilter() {
      this.filterText = "";
    },
    //树形控件点击
    dwTreeclick(data, node, item) {
      this.formSearch.parameters.departmentId=data.id;
      this.loadList();
    },
    ///////////////////////////////////用户管理操作////////////////////////////////////////////////
    //点击复选框触发，复选框样式的改变
    checkSelect(val) {
      this.multipleSelection = val;
      let hasSuperUser=false;
      this.multipleSelection.forEach(element => {
         if (element.is_super_user == true) {
            hasSuperUser = true;
         }
      });
      if (hasSuperUser) {
        this.canBeRemove = false;
      }else{
        this.canBeRemove = true;
      }
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取数据方法
    loadList() {
      this.loading = true;
      if (this.formSearch.parameters.postIdLists.length>0) {
         this.formSearch.parameters.postIds=this.formSearch.parameters.postIdLists.join(",");
      }else{
         this.formSearch.parameters.postIds="";
      }
      loadPageList(this.formSearch).then(response => {
        let data = response.data;
        this.listData = data.Data;
        //分页赋值
        this.pageparm.currentPage = this.formSearch.page;
        this.pageparm.pageSize = this.formSearch.limit;
        this.pageparm.total = data.Count;
        this.loading = false;
      });
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage;
      this.formSearch.limit = par.pageSize;
      this.loadList();
    },
    //搜索事件
    handleSearch() {
      this.formSearch.page =1;
      this.formSearch.limit = 16;
      this.loadList();
    },
    //新增
    handleAdd() {
      this.formInfo = {};
      this.editForm.formVisible = true;
      this.editForm.formTitle = "新增用户信息";
      this.editForm.width = "60%";
      this.curComponent = EditForm;
    },
    //修改
    handleEdit(index, row) {
     this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改用户信息";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        if (obj.department_ids!="") {
          obj.departmentList=  obj.department_ids.split(',');
        }
        if (obj.post_ids!="") {
          obj.postList=  obj.post_ids.split(',');
        }
        if (obj.role_ids!="") {
          obj.roleList=  obj.role_ids.split(',');
        }
        this.formInfo = obj;
      }
      this.curComponent = EditForm;
    },
    //密码重置
    handleReset(index, row) {
      let self = this;
       let par = { id:row.id };
      pswReset(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
           self.$messageTip.success(data.Msg);  
        } else {
           self.$messageTip.warning(data.Msg);
        }
      });
    },
    //删除
    handleRemove(index, row) {
      let self = this;
      if ( row != null || (this.$refs.multipleTable && this.$refs.multipleTable.store.states.selection.length > 0)
      ) {
        this.$messageTip.boxWarning("确定要删除吗?")
          .then(() => {
            let par = [];
            if (row != null) {
              par.push(row.id);
            } else {
              let selectData = self.$refs.multipleTable.store.states.selection;
              for (let index = 0; index < selectData.length; index++) {
                par.push(selectData[index].id);
              }
            }
            removeInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg);  
                self.loadList();
              } else {
                self.$messageTip.warning(data.Msg); 
              }
            });
          })
          .catch(() => {
            this.$messageTip.info( "已取消删除！"); 
          });
      } else {
          this.$messageTip.info( "请选择删除项！"); 
      }
    },
    //回调
    callBack(info){
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.loadList();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
//树列表界面
.treetit {
  font-size: 14px;
  font-family: " Microsoft YaHei";
  color: #0067ff;
}
.tree-header {
  padding: 10px 10px;
  border: 1px solid #e7eaed;
  box-sizing: border-box;
}
.tree-filter {
  padding: 5px 5px;
  border-left: 1px solid #e7eaed;
  border-right: 1px solid #e7eaed;
}
.tree-content {
  overflow-y: auto;
  border-left: 1px solid #e7eaed;
  border-right: 1px solid #e7eaed;
  border-bottom: 1px solid #e7eaed;
}
.tree-content .tree {
  margin-left: 10px;
}
</style>
